<template>
  <div class="home">
    <div class="search-box">
      <div class="search">
        <input type="text" placeholder="搜索帖子">
        <i class="iconfont search-icon">&#xe600;</i>
      </div>
      <i class="iconfont">&#xe617;</i>
    </div>
  </div>
</template>
<script>
</script>
<style lang="scss" scoped> $width: 100%;
 $bg-color: red;

 .search-box {
   width: $width;
   height: 44px;
   background-color: $bg-color;
   line-height: 44px;
   display: flex;
   align-items: center;
   justify-content: space-evenly;

   .search {
     position: relative;
     display: flex;
     width: 341.3px;
     height: 30px;
     background-color: rgb(245, 244, 242);
     align-items: center;
     justify-content: center;
     color: inherit;

     input {
       text-align: center;
       border: 0;
       background-color: rgb(245, 244, 242);
     }

     .search-icon {
       position: absolute;
       left: 0;
       top: 0;
     }

     &::placeholder {
       color: inherit;
     }
   }
 }</style>
